<template>
	<div class="theme">
		<div class="overlay nav-btm">
			<div class="overlay-content scrolling">
				<div class="assets">
					<div class="assets-top">
						<div class="assets-top-wallet">
							<div class="assets-top-wallet-select box-shadow" @click="showWa">
								<img src="../assets/images/assets12.png" width="25px" />
								<span>KSLDI第一个钱包</span>
								<van-icon name="arrow-down" style="position: relative;left: 4px;" />
							</div>
							<div class="assets-top-wallet-add box-shadow" @click="$router.push({path:'/addAssets'})">
								<van-icon name="plus" size="19" />
							</div>
						</div>
						<div class="assets-top-account">
							<div class="assets-top-account-bg">
								<img src="../assets/images/assets9.png" width="100%" />
							</div>
							<div class="assets-top-account-content">
								<div class="assets-top-account-content-name">
									<span>Total assets</span>
									<span class="assets-top-account-content-name-eyes">
					                    <img src="../assets/images/assets10.png" height="16px" />
					                  </span>
									<span style="float: right;">
				                    <van-icon name="ellipsis" @click="$router.push({path: 'WalletManagement'})" />
				                  </span>
								</div>
								<div class="assets-top-account-content-price">¥ 54835.400</div>
								<div class="assets-top-account-content-address">
									OXDKDISE...SKSLAJLA
									<span class="assets-top-account-content-name-eyes" @click="$router.push({path: '/Receivables'})">
				                    <img src="../assets/images/assets3.png" height="16px" />
				                  </span>
								</div>
							</div>
						</div>
					</div>
					<div class="assets-mid">
						<van-row>
							<van-col span="6" @click="$router.push({path: 'Qr'})">
								<p>
									<img src="../assets/images/assets6.png" width="35" />
								</p>
								<p>扫一扫</p>
							</van-col>
							<van-col span="6" @click="$router.push({path: 'Collections'})">
								<p>
									<img src="../assets/images/assets5.png" width="35" />
								</p>
								<p>转入</p>
							</van-col>
							<van-col span="6" @click="$router.push({path: 'Transfer'})">
								<p>
									<img src="../assets/images/assets7.png" width="35" />
								</p>
								<p>转出</p>
							</van-col>
							<van-col span="6" @click="$router.push({path: 'addWallet'})">
								<p>
									<img src="../assets/images/assets8.png" width="35" />
								</p>
								<p>创建钱包</p>
							</van-col>
						</van-row>
					</div>
					<div class="asset-foot box-shadow">
						<div class="asset-foot-title">ToKen</div>
						<div class="asset-foot-content">
							<van-cell-group>
								<van-cell value="111" v-for="(el,i) in wallet.assetsVOList" :key="i">
									<div slot="title" class="asset-foot-content-title">
										<img :src="el.logoUrl" width="50px" height="50px" />
										<span v-text="el.tokenName"></span>
									</div>
									<p v-text="parseFloat(el.balance).toFixed(5).slice(0,-1)"></p>
									<p style="position: relative;top: -6px;color: #999999;" v-text="'¥ ' + parseFloat(el.balance).toFixed(5).slice(0,-1)"></p>
								</van-cell>
							</van-cell-group>
						</div>
					</div>
				</div>
				<van-popup v-model="security" position="bottom" class="security" :overlay="false">
					<p class="security-title">安全提醒</p>
					<p>你的身份助记词未备份，请务必备份助记词</p>
					<p>助记词可用于恢复身份下的钱包资产，防止忘记密码、 应用删除、手机丢失等情况导致资产损失。</p>
					<p class="security-button">
						<van-button type="info" @click="security = false;">稍后提醒</van-button>
						<van-button type="info" @click="security = false;">安全备份</van-button>
					</p>
				</van-popup>
				<!-- 转账备份的安全提醒 -->
				<van-popup class="backups" v-model="showCenter">
					<div>安全提醒</div>
					<p>备份助记词,解锁查看收款地址功能</p>
					<p>你的身份助记词未备份,请务必备份助记词</p>
					<p>助记词可用于恢复身份下钱包资产,防止忘记密码,应用删除、手机丢失等情况导致资产损失</p>
					<van-button type="info">立即备份</van-button>
					<van-button plain type="primary" @click="showCenter = false">取消</van-button>
				</van-popup>
				<!-- 选择钱包 -->
				<van-popup v-model="showWallet" class="select-wallet">
					<div class="tab-wrap">
						<div class="select-head row-space-between align-items">
							<van-icon name="cross" size="14" @click="showWallet = false;" />
							<span>选择钱包</span>
							<img src="../assets/images/set.png" width="14" height="14" />
						</div>
						<div class="row-space-between" style="height:16.125rem;">
							<div class="tab-left">
								<div class="list-wrap">
									<div class="tab-list" :class="current == index?'selected':''" v-for="(item,index) in list" :key="index" @click="selected(index)">
										<img :src="item.url" alt srcset />
									</div>
								</div>
							</div>
							<div class="tab-content">
								<div class="content-wrap">
									<div class="content-floor">
										<p>身份</p>
										<div class="blue-bg" @click="openWallet(index,item.walletName,item.address,id)" v-for="(item,index) in wallet_list" :key="index">
											<span>{{item.walletName}}</span>
											<span>{{item.address}}</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</van-popup>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { home } from "./../utils/api";
	export default {
		name: "Home",
		components: {},
		props: {},
		data() {
			return {
				security: false,
				showWallet: false,
				showCenter: false,
				list: [{
					url: require("../assets/images/tabli1.png")
				}],
				wallet_list: [],
				current: 0,
				address1: '',
				address2: '',
				wallet: {},
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {
			openWallet(index, walletName, address, id) {
				this.$router.push({
					name: 'WalletManagement',
					params: {
						index: index,
						walletName: walletName,
						address: address,
						id: id
					}
				})
			},
			selected(index) {
				this.current = index;
			},
			showWa() {
				this.showWallet = true;
				home.manageWallet({
					type: "ETH_NODE"
				}).then(res => {
					res.data.forEach(item => {
						let address1 = item.address.substr(0, 10)
						let address2 = item.address.substr(item.address.length - 10, 10)
						item.address = address1 + '....' + address2;
					});
					this.wallet_list = res.data;
				});
			}
		},
		created() {},
		mounted() {
			home.getWallet({
				type: 'ETH_NODE'
			}).then(res => {
				if(res.code == 200) {
					res.data.backup ? '' : this.security = true;
					this.wallet = res.data;
					localStorage.address = this.wallet.address;
					this.wallet.address = this.wallet.address.substr(0, 8) + '....' + this.wallet.address.substr(this.wallet.address.length - 8, 8);
					localStorage.Mnemonic = this.wallet.mnemonic;
				}
			})
		},
		destroyed() {},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.overlay {
		background: #f2f6f7;
		img,
		i {
			vertical-align: text-bottom;
		}
	}
	
	.assets {
		padding: 10px;
	}
	
	.assets-top {
		.assets-top-wallet {
			position: relative;
			height: 29px;
			padding-bottom: 10px;
			.assets-top-wallet-select {
				float: left;
				position: relative;
				height: 29px;
				line-height: 29px;
				padding-left: 34px;
				padding-right: 15px;
				background: #ffffff;
				border-radius: 50px;
				color: #666666;
				img {
					position: absolute;
					left: 4px;
					top: 2px;
				}
			}
			.assets-top-wallet-add {
				padding: 5px;
				float: right;
				background: #ffffff;
				height: 19px;
				border-radius: 29px;
			}
		}
		.assets-top-account {
			position: relative;
			.assets-top-account-content {
				width: calc(~"100% - 40px");
				height: calc(~"100% - 43px");
				position: absolute;
				top: 0;
				padding: 20px;
				color: #ffffff;
				/*letter-spacing: 1px;*/
				.assets-top-account-content-name {
					position: relative;
					.assets-top-account-content-name-eyes {
						position: relative;
						left: 2px;
					}
					i {
						font-size: 20px;
					}
				}
				.assets-top-account-content-price {
					font-size: 30px;
					padding: 15px 0;
				}
				.assets-top-account-content-address:active {
					opacity: 0.5;
				}
			}
		}
	}
	
	.assets-mid {
		text-align: center;
		padding: 20px 0;
		p:first-child {
			margin-bottom: 10px;
		}
	}
	
	.asset-foot {
		background: #ffffff;
		border-radius: 10px;
		padding-bottom: 10px;
		.asset-foot-title {
			padding: 20px;
			font-size: 17px;
			padding-bottom: 10px;
		}
		.asset-foot-content {
			.asset-foot-content-title {
				position: relative;
				span {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 60px;
				}
			}
			.van-hairline--top-bottom::after,
			.van-hairline-unset--top-bottom::after {
				border-width: 0px;
			}
			.van-cell:not(:last-child)::after {
				left: 76px;
			}
			.van-cell__value {
				position: absolute;
				right: 16px;
				top: 50%;
				transform: translateY(-50%);
				color: #333333;
			}
		}
	}
	
	.security {
		bottom: 50px;
		background: #fbfcfd;
		padding-bottom: 10px;
		p {
			padding: 0 30px;
			line-height: 25px;
			color: #666666;
		}
		.security-title {
			text-align: center;
			padding: 10px 0;
			font-size: 16px;
			color: #333333;
		}
		.van-button {
			height: 36px;
			line-height: 36px;
		}
		.security-button {
			display: flex;
			margin-top: 10px;
			button {
				border-radius: 5px;
				flex: 1;
				margin-left: 5px;
			}
			button:first-child {
				margin-right: 5px;
				margin-left: 0px;
				color: #999999;
				background: #d5dce0;
				border-color: #d5dce0;
			}
		}
	}
	
	.box-shadow {
		box-shadow: 0px 0px 0px 2px rgba(226, 241, 245, 0.3);
	}
	
	.select-wallet {
		width: 20.3125rem;
		border-radius: 1rem;
		.tab-wrap {
			height: 100%;
			.select-head {
				padding: 10px 15px;
				box-sizing: border-box;
				border-bottom: 1px solid #d4d6df;
				width: 100%;
				i {
					padding-top: 2px;
					box-sizing: border-box;
				}
				span {
					height: 20px;
					font-size: 13px;
					font-weight: bold;
				}
			}
			.tab-left {
				width: 75px;
				background: #fafbfc;
				height: 100%;
				border-right: 1px solid #e6e9f4;
				overflow: hidden;
				.list-wrap {
					height: 195px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-top: 20px;
					.tab-list {
						text-align: center;
						img {
							height: 30px;
							width: 30px;
						}
					}
					.selected {
						position: relative;
					}
					.selected::after {
						content: url("../assets/images/tri.png");
						width: 10px;
						height: 10px;
						display: block;
						position: absolute;
						right: -1px;
						top: 8px;
					}
				}
			}
			.tab-content {
				overflow-y: scroll;
				width: 100%;
				.content-wrap {
					.content-floor {
						font-size: 12px;
						color: #999999;
						p {
							padding: 20px 0 10px 17px;
							box-sizing: border-box;
						}
					}
				}
				.blue-bg {
					background: url("../assets/images/tabcon.png") no-repeat;
					background-size: 100%;
					width: 240px;
					height: 50px;
					padding: 6px 0 0 15px;
					box-sizing: border-box;
					margin: 0 auto;
					color: #fff;
					font-size: 12px;
					margin-bottom: 8px;
					span:nth-child(1) {
						display: block;
						font-size: 15px;
						margin-bottom: 4px;
					}
				}
			}
		}
	}
</style>